<template>
  <div class="home">
     <div id="map"></div>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  name: 'Home',
  data(){
    return{
      mymap:''
    }
  },
  components: {},
  mounted() {
    this.mapInit();
  },
  methods:{
    // 初始加载底图
    mapInit(){
      lazyAMapApiLoaderInstance.load().then(() => {
      var map = new AMap.Map("map", {
          center: [104.070542, 30.661234], // [107.755852, 29.590834],
          expandZoomRange: true,
          zooms: [3, 20],
          zoom: 10, //8.35,
          pitch:35, // 地图俯仰角度，有效范围 0 度- 83 度
          viewMode:'3D', // 地图模式
          mapStyle: "amap://styles/f2a14a729d5018cebe9aa5a844e8c053", // "amap://styles/cf4bbeff185671422895aaff7434766a"
        });

        //main.js加载的模块 DistrictSearch
        AMap.plugin(["AMap.DistrictSearch"], () => {
          // 行政区查询服务
          var district = new AMap.DistrictSearch({
            subdistrict: 0,
            extensions: "all",
            level: "city",

          });

          //绘制地图，只显示当前行政区域，自定义边境颜色
          district.search("成都", (status, result) => {
            // 外多边形坐标数组和内多边形坐标数组
            var outer = [
              new AMap.LngLat(-360, 90, true),
              new AMap.LngLat(-360, -90, true),
              new AMap.LngLat(360, -90, true),
              new AMap.LngLat(360, 90, true),
            ];
            var holes = result.districtList[0].boundaries;
            var pathArray = [outer];
            pathArray.push.apply(pathArray, holes);
            var polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: "#0469c1",
              strokeWeight: 1.5,
              fillColor: "#132230",
              fillOpacity: 1,
            });
            polygon.setPath(pathArray);
            map.add(polygon);


            //地图点击事件
            map.on("click", (e) => {
              console.log(e.lnglat.getLng() + "," + e.lnglat.getLat());
              let marker = new AMap.Marker({
                position: e.lnglat,
                map: map,
              });
            });
          });

        });

        // 添加 3D 罗盘控制
        AMap.plugin(['AMap.ControlBar'], ()=>{
          map.addControl(new AMap.ControlBar({
            position: {
              right: '200px',
              top: '20px'
            },
            showControlButton: true,  // 是否显示倾斜、旋转按钮。默认为 true
          }));
        });
      });
    }
  }

}
</script>

<style lang="scss" scoped>
.home{
  #map{
    width: 1920px;
    height: 937px;
  }
}
</style>
